<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
					<h3 style="margin-bottom: 20px;">回收站</h3>
					<div>
						<span style="padding-left: 10px; color: #606266;">商品名称</span>
						<el-input v-model="form.goodsName" 
						placeholder="请输入商品名称" style="width: 200px;margin-left: 10px;" />
						<span style="margin-left: 20px; color: #606266;">商品分类</span>
						 <el-select v-model="form.separateId" placeholder="全部" 
						 style="width: 200px;margin-left: 10px;">
						    <el-option
						      v-for="item in options"
						      :key="item.separateId"
						      :label="item.separateName"
						      :value="item.separateId"
						      :disabled="item.disabled"
						    />
						  </el-select>
						<span style="margin-left: 20px; color: #606266;">商品类型</span>
						<el-select v-model="form.goodsVirtual" 
						placeholder="请选择商品类型" style="width: 200px;margin-left: 10px;">
						   <el-option
						     v-for="item in options1"
						     :key="item.value"
						     :label="item.label"
						     :value="item.value"
						     :disabled="item.disabled"
						   />
						 </el-select>
						 <el-button type="primary" style="margin-left: 20px;" @click="search">搜索</el-button>
						 <el-button style="margin-left: 10px;" @click="reset">重置</el-button>
					</div>
					<el-button style="margin-top: 10px;"
						@click="handlerMuchRec" 
						:disabled="multipleSelection.length==0 ? true : false"
					>批量恢复</el-button>
					<el-table
					    ref="multipleTableRef"
					    :data="tableData"
					    style="width: 100%"
					    @selection-change="handleSelectionChange"
						height="50vh"
					  >
					    <el-table-column type="selection" width="55"/>
					    <el-table-column label="商品" width="180">
						<template #default="scope">
							<div class="goodsDetail">
								<img :src="downloadUrl+scope.row.goodsImage" style=" width:50px;height: 50px;object-fit: cover;">
								<div>
									<p>{{scope.row.goodsName}}</p>
									<p style="color: #4b5db9;">{{scope.row.goodsVirtual}}</p>
								</div>
							</div>
						</template>
					    </el-table-column>
					    <el-table-column label="价格">
							<template #default="scope">￥{{ scope.row.priceValue }}</template>
						</el-table-column>
					    <el-table-column property="priceNum" label="库存"/>
						<el-table-column property="goodsSend" label="销量"/>
						<el-table-column property="goodsState" label="状态"/>
						<el-table-column property="createTime" label="创建时间" width="200" />
						<el-table-column label="操作" width="120">
							<template #default="scope1">
								<a style="color: #4b5db9;cursor: pointer;" @click="restore(scope1.row)">恢复</a>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						layout="prev,pager,next"
						:page-count="total"
						:page-size="pageSize"
						v-model:current-page="pageIndex"	
						@current-change="changePage"
					></el-pagination>
			</el-main>
	    </el-container>
	</div>
	
	
	<!-- 批量恢复确认框 -->
	 <el-dialog
	    v-model="dialogVisible1"
	    title="提示"
	    width="500"
	  >
	    <span>确定要恢复这些商品吗</span>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible1 = false">取消</el-button>
	        <el-button type="primary" @click="define">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  
	  <!-- 批量恢复单个框 -->
	   <el-dialog
	      v-model="dialogVisible2"
	      title="提示"
	      width="500"
	    >
	      <span>确定要恢复该商品吗</span>
	      <template #footer>
	        <div class="dialog-footer">
	          <el-button @click="dialogVisible2 = false">取消</el-button>
	          <el-button type="primary" @click="define">
	            确定
	          </el-button>
	        </div>
	      </template>
	    </el-dialog>
</template>
<script setup>
	import Header from "@/components/Header.vue"
	import {reactive,ref,onMounted} from 'vue';
	import {RecycleBinList,GoodClassCase,RestoreGoods} from "@/api"
	import { ElMessage } from 'element-plus'
	import { uploadUrl,baseUrl,downloadUrl } from "@/utils/request";
	let pageIndex=ref(1);
	let pageSize=6;
	let total=ref(0)
	let form = reactive({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:1,
		goodsName:"",
		separateId:"",
		goodsVirtual:""
	})
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		recovery()
	}
	//商品分类
	let options = ref([])
	let goodsclass = async ()=>{
		let rep = await GoodClassCase(1)
		//console.log("商品分类框",rep)
		options.value= rep;
	}
	//商品类型
	let options1 = ref([
		 {
		    value: '实物商品',
		    label: '实物商品',
		},
		{
		    value: '虚拟商品',
		    label: '虚拟商品',
		},
	])
	
	//商品列表
	let tableData=ref([])
	let multipleTableRef = ref()
	let multipleSelection = ref([])
	let dialogVisible1 = ref(false)
	let dialogVisible2 = ref(false)
	let arr=[]
	let handleSelectionChange = (val) => {
	  multipleSelection.value = val
	  // console.log("val",val)
	  // console.log(multipleSelection.value)
	}
	
	//批量恢复
	const handlerMuchRec = ()=>{
		// console.log("aaa",multipleSelection.value)
			multipleSelection.value.forEach(row=>{
				let obj={
					goodsId:row.goodsId
				}
				arr.push(obj)
				
			})
			// console.log("恢复",arr)
			dialogVisible1.value=true
	}
	//点击批量恢复中的确定
	const define =async ()=>{
		//let out = await RestoreGoods(arr)
		// console.log("arr",arr)
		dialogVisible1.value = false;
		dialogVisible2.value = false
		recovery()
		//console.log("恢复11111",out)
		// if(out == "还原成功"){
		// 	ElMessage.success({
		// 		message:"恢复成功"
		// 	})
		// }else{
		// 	ElMessage.error({
		// 		message:"恢复失败"
		// 	})
		// }
	}
	
	//回收站列表
	const recovery =async ()=>{
		let res = await RecycleBinList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("回收站",res)
		tableData.value=res.goodsList;
		total.value=res.pageCount
	}
	
	//搜索
	let searchData = {}
	const search =async ()=>{
		// console.log("form",form)
		for(var i in form){
			if(form[i] != ""){
				searchData[i]=form[i]
			}
		}
		//console.log("searchData",searchData)
		let opt = await RecycleBinList(searchData)
		tableData.value=opt.goodsList;
		
		// console.log("搜索",opt)
		
		
	}
	
	//重置
	const reset = ()=>{
		recovery()
		form = reactive({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1,
			goodsName:"",
			separateId:"",
			goodsVirtual:""
		})
	}
	
	//恢复商品
	const restore = (row)=>{
		// console.log("恢复1",row.goodsId)
		dialogVisible2.value = true
		let obj={				goodsId:row.goodsId			}		arr.push(obj)		
		//console.log("2",arr)
	}
	
	onMounted(()=>{
		recovery()
		goodsclass()
	})
	
</script>
<style scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
		
	}
	:deep(.el-table .cell .goodsDetail){
		display: flex !important;
	}
</style>